<!-- templates/blog/post_form.html -->
{% extends 'base.html' %}

{% block title %}
    {% if form.instance.pk %}编辑文章{% else %}新建文章{% endif %} - MyBlog
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>{% if form.instance.pk %}编辑文章{% else %}新建文章{% endif %}</h2>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <!-- 通用错误提示 -->
        {% if form.non_field_errors %}
        <div class="alert alert-danger">
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        </div>
        {% endif %}

        <!-- 标题字段 -->
        <div class="mb-3">
            <label for="{{ form.title.id_for_label }}" class="form-label">标题</label>
            {{ form.title }}
            {% if form.title.errors %}
            <div class="invalid-feedback d-block">
                {% for error in form.title.errors %}
                    {{ error }}
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <!-- 内容字段 -->
        <div class="mb-3">
            <label for="{{ form.content.id_for_label }}" class="form-label">内容</label>
            {{ form.content }}
            {% if form.content.errors %}
            <div class="invalid-feedback d-block">
                {% for error in form.content.errors %}
                    {{ error }}
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <div class="row">
            <!-- 分类字段 -->
            <div class="col-md-6 mb-3">
                <label for="{{ form.category.id_for_label }}" class="form-label">分类</label>
                {{ form.category }}
                {% if form.category.errors %}
                <div class="invalid-feedback d-block">
                    {% for error in form.category.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
            </div>

            <!-- 标签字段 -->
            <div class="col-md-6 mb-3">
                <label for="{{ form.tags.id_for_label }}" class="form-label">标签</label>
                {{ form.tags }}
                {% if form.tags.errors %}
                <div class="invalid-feedback d-block">
                    {% for error in form.tags.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>

        <div class="row">
            <!-- 图片上传 -->
            <div class="col-md-6 mb-3">
                <label for="{{ form.image.id_for_label }}" class="form-label">封面图片</label>
                {{ form.image }}
                {% if form.image.errors %}
                <div class="invalid-feedback d-block">
                    {% for error in form.image.errors %}
                        {{ error }}
                    {% endfor %}
                </div>
                {% endif %}
                {% if form.instance.image %}
                <div class="mt-2">
                    <small>当前图片:</small>
                    <img src="{{ form.instance.image.url }}" alt="当前封面" class="img-thumbnail" style="max-height: 100px;">
                </div>
                {% endif %}
            </div>

            <!-- 发布状态 -->
            <div class="col-md-6 mb-3">
                <div class="form-check form-switch mt-4">
                    {{ form.is_published }}
                    <label class="form-check-label" for="{{ form.is_published.id_for_label }}">发布文章</label>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-between mt-4">
            <button type="submit" class="btn btn-primary">
                {% if form.instance.pk %}更新{% else %}创建{% endif %}
            </button>
            <a href="{% url 'post-list' %}" class="btn btn-secondary">取消</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<!-- 如果需要富文本编辑器可以在这里添加 -->
<script>
// 示例：简单的标签选择增强
document.addEventListener('DOMContentLoaded', function() {
    // 使标签选择更友好
    const tagsSelect = document.getElementById('{{ form.tags.id_for_label }}');
    if (tagsSelect) {
        tagsSelect.classList.add('select2');
    }
});
</script>
{% endblock %}
